<template>
  <div class="widget-item-container">
    <a-form-item
      v-if="element"
      :key="element.key"
      class="widget-view"
      :colon="false"
      :class="{ active: selectWidget?.key === element.key }"
      :rules="element.options.rules"
    >
      <a-row :key="element.key" :gutter="element.options.gutter ?? 0" :align="element.options.align">
        <a-col :span="element.options.columns[0].gridLayoutNumber">
          <p class="label-text" :class="{ 'label-text-required': element.options.rules.required }">
            {{ element.options.columns[0].name }}
          </p>
          <packageCom v-model:packageString="packageString" v-model:packageList="packageList"></packageCom>
        </a-col>
        <a-col :span="element.options.columns[1].gridLayoutNumber">
          <p class="label-text" :class="{ 'label-text-required': element.options.rules.required }">
            {{ element.options.columns[1].name }}
          </p>
          <a-select
            v-model:value="value1"
            :options="packageList"
            :size="config.size"
            :field-names="fieldNames"
            style="width: 100%"
          ></a-select>
        </a-col>
      </a-row>
    </a-form-item>

    <div v-if="selectWidget?.key === element.key" class="widget-view-action">
      <!-- <SvgIcon name="copy" prefix="icon-form" color="#fff" @click.stop="$emit('copy')" /> -->
      <SvgIcon
        v-if="isConfig() || element.options.allowDeleteFlag === 1"
        name="delete"
        prefix="icon-form"
        color="#fff"
        @click.stop="emits('delete')"
      />
    </div>

    <div v-if="selectWidget?.key === element.key" class="widget-view-drag">
      <SvgIcon name="move" prefix="icon-form" color="#fff" class="drag-widget" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, toRefs } from 'vue'
import { WidgetForm } from '../../config/antd'
import packageCom from './package.vue'
import { isConfig } from '@@/utils/index'

const emits = defineEmits(['delete'])
const props = defineProps<{
  config: WidgetForm['config']
  element: any
  selectWidget: any
}>()

const { config, element, selectWidget } = toRefs(props)
const packageString = ref()
const packageList = ref<any[]>([])
const value1 = ref()
const fieldNames = { label: 'unitName', value: 'unit' }
</script>
<style lang="less" scoped>
@import url('@/styles/var.less');
.label-text {
  color: @text-color-third;
  margin-bottom: 0;
  padding: 0 0 8px;
  line-height: 1.5715;
  white-space: initial;
  text-align: left;
}
.label-text-required::before {
  display: inline-block;
  margin-right: 4px;
  color: #ff4d4f;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
</style>
